<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 样式</title>
    <style>
<!-- 行内样式 内嵌样式 外链样式 -->
        /*层叠性 继承性 优先级*/
    /*标签选择器，通用操作，作用于所有当前的这个标签*/
    h1{
        color: aqua;
        background-color: rebeccapurple;
    }
    /*ID选择器 唯一性 精准查找一个*/
    #title{
        font-size: 24px;
    }
    .red{
        color: red;
    }
    .blue{
        background-color: blue;
    }
    li.red{
        font-size: 36px;
    }
    h1,p,span,.red{
        text-align: center;
    }
    </style>
</head>
<body>
<!--<h1><a href="">xixi</a></h1>-->
<h1 class="red">以梦为马 越骑越傻</h1>
<h1>乾坤未定 你我皆是闲鱼</h1>
<p>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aspernatur beatae delectus dolorem fugiat ipsa iusto laborum, minus nisi perferendis quasi qui totam voluptatem! Officiis quibusdam sed soluta ullam voluptas.</span>
    <span   class="red blue">Animi atque blanditiis commodi, consequuntur debitis doloremque dolores ea earum eveniet fugiat fugit itaque iure maxime nam nemo odit officiis, qui, quo reprehenderit rerum ullam voluptates voluptatibus voluptatum. Assumenda, dolore.</span>
    <span>Eligendi eveniet expedita impedit in labore, officiis saepe sed? Illum iure natus neque nostrum quia quos reiciendis sequi sunt. Distinctio eaque enim expedita libero, molestiae perferendis quos rem temporibus voluptas.</span>
</p>
<ul class="red">
    <li id="title">item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>
</body>
</html>